<template>
  <md-popup v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="匿名评价" cancel-text="取消" @cancel="cancel"></md-popup-title-bar>
    <div class="evaluate_box">
      <div class="starWrap">
        <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" />
        <p>{{evaluateResulttext}}</p>
      </div>
      <div>
        <ul class="evaluationList">
          <li v-for="(item, index) in evaluationList" :key="index" class="evaluation-active" ref="menuItem">{{item}}</li>
        </ul>
      </div>
      <div style="clear:both"></div>
    </div>
  </md-popup>
</template>
<script>
import { Popup, PopupTitleBar, Picker, Selector, Dialog } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Loading from '@/components/loading';
import http from '@/common/http';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'time-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Selector.name]: Selector,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      evaluateResulttext: '',
      level: '',
      levelList: [0, 1, 2, 3, 4],
      stara: require('@/assets/imgs/xcxq_icon_xing_light@2x.png'), // 亮星星
      starb: require('@/assets/imgs/xcxq_icon_xing_dark@2x.png'), // 暗星星
      evaluationList: []
    };
  },
  created() {
    // 回显评价星星
    this.level = this.getIncityOrderDate.evaluateLevel;
    // 回显评价星星描述
    this.evaluateResulttext = this.getIncityOrderDate.evaluateLevelText;
    // 回显评价标签
    var tagPes = this.getIncityOrderDate.evaluateLabel;
    if (tagPes) {
      var tagPesarr = tagPes.split(',');
      for (var i = 0; i < tagPesarr.length; i++) {
        this.evaluationList.push(tagPesarr[i]);
      }
    }
    this.evaluationList.pop();
  },
  methods: {
    cancel() {
      this.value = false;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate'])
  }
};
</script>

<style lang="stylus">
.evaluate_box {
  background-color: #fff;
  padding: 30px 0px;
}

.starWrap {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.starWrap img {
  width: 50px;
  height: 50px;
  margin-left: 30px;
}

.starWrap p {
  font-size: 26px;
  color: #666;
  margin-top: 10px;
}

.evaluationList li {
  height: 72px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  float: left;
  text-align: center;
  line-height: 72px;
  margin-left: 5%;
  margin-top: 20px;
  font-size: 28px;
  color: #666;
  padding: 0px 25px;
}

.evaluationList li.evaluation-active {
  border: 1px solid #ff6917;
  color: #ff6917;
}

.taxi_pay {
  background-color: #ff6917;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #fff;
  text-align: center;
  margin: 20px 20px 0px 20px;
  border-radius: 7px;
}
</style>
